/* eslint-disable no-useless-escape */
import { createNamespacedHelpers, mapGetters } from "vuex";
const { mapMutations } = createNamespacedHelpers("view");
import optionsComponent from "./common/options";
import freeItem from "./common/freeItem";
import formItem from "./common/formItem";
export default {
  components: {
    optionsComponent,
    freeItem,
    formItem,
  },
  provide() {
    return {
      father: this,
    };
  },
  data() {
    return {
      activeName: "first",
      index: 0,
      styles: "",
      timer: null,
    };
  },
  computed: {
    ...mapGetters(["componentsList", "component", "viewType"]),
    options: {
      get() {
        return this.component["__options__"];
      },
      set(val) {
        this.setComponent({
          ...this.component,
          __options__: val,
        });
      },
    },
    configs() {
      return this.component["__config__"];
    },
    slot() {
      return this.component["__slot__"];
    },
    commonOptions() {
      return this.component["__commonOptions__"];
    },
    vModel: {
      get() {
        return this.component["__vModel__"];
      },
      set(val) {
        this.setComponent({
          ...this.component,
          __vModel__: val,
        });
      },
    },
    field: {
      get() {
        return this.component["__field__"];
      },
      set(val) {
        this.setComponent({
          ...this.component,
          __field__: val,
        });
      },
    },
    echartsOptions: {
      get() {
        return this.component["__echartsOptions__"];
      },
      set(val) {
        this.component['__echartsOptions__'] = val
      },
    },
  },
  watch: {
    component: {
      handler(val) {
        // 处理公共样式属性
        if (val["__commonOptions__"].style) {
          const style = val["__commonOptions__"].style.map((item) => {
            return {
              [item.label]: item.value,
            };
          });

          this.styles = JSON.stringify(style)
            .replace(/[\]/\[/\{/\}/]/g, "")
            .replace(/\/n/g, "");
        }
      },
      deep: true,
    },
    styles: {
      handler(val) {
        // if (this.timer) {
        //   clearTimeout(this.timer);
        // }

        // this.timer = setTimeout(() => {
        let str = `{${val.replace(/["\s+]/g, "").replace(/;/g, ",")}}`;

        try {
          const reg = /([^\:\{\}\[\]\,]+)\:([^\:\,\{\}\[\]]*)/g;
          str = str.replace(reg, '"$1":"$2"');
          const json = eval("(" + str + ")");
          const arr = Object.entries(json).map((item) => {
            return {
              label: item[0],
              value: item[1].replace(/!important/g, " !important"),
            };
          });
          this.component["__options__"].style = arr;
        } catch (error) {
          this.$message.error("参数格式不正确");
        }
        // }, 1000);
      },
    },
  },
  mounted() {
    if (this.component["__options__"].style) {
      const a = this.component["__options__"].style.map((item) => {
        return {
          [item.label]: item.value,
        };
      });
      this.styles = JSON.stringify(a)
        .replace(/[\]/\[/\{/\}/]/g, "")
        .replace(/\/n/g, "");
    }
  },
  methods: {
    ...mapMutations({
      setComponent: "SET_COMPONENT",
    }),
    add(
      params = "__options__",
      type = "style",
      obj = {
        label: "",
        value: "",
      }
    ) {
      this.component[params][type].push(obj);
    },
    remove(index, params = "__options__", type = "style") {
      this.component[params][type].splice(index, 1);
    },
  },
};
